<template>
  <div class="header">
    <div class="logo"><i class="fas fa-hands-helping"></i> 邻里社区</div>
    <div class="header-icons">
      <i @click="notify" class="far fa-bell"></i>
      <i class="far fa-user-circle" @click="navigateToProfile"></i>
    </div>
  </div>
</template>

<script setup>
// 这个组件是纯展示性的，不需要任何脚本逻辑
// 如果你以后需要点击事件，可以在这里添加方法
import {useRouter} from "vue-router";
const router = useRouter();
const notify = () => {
  router.push('notifications')
}
const navigateToProfile = () => {//点击右上角图标跳转到个人中心
  router.push({ name: 'profile' })
}
</script>

<style scoped>
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.header {
  background: linear-gradient(135deg, var(--primary), #5A91FF);
  color: white;
  padding: 18px 15px;
  border-radius: 0 0 30px 30px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 24px rgba(58, 123, 255, 0.25);
  position: relative;
  overflow: hidden;
}
.header::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' fill-opacity='0.2' d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transform: rotate(15deg) translate(20px, -40px);
}
.logo {
  font-size: 1.6rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}
.logo i {
  margin-right: 10px;
  font-size: 1.8rem;
  animation: pulse 2s infinite;
}
.header-icons {
  display: flex;
  gap: 20px;
  font-size: 1.4rem;
  position: relative;
  z-index: 2;
}
.header-icons i {
  transition: var(--transition);
}
.header-icons i:hover {
  transform: scale(1.15);
}
</style>